<template>
    <div :style="bg">
        <div style="padding: 10px">
            <!--    功能区域-->
            <!--    <div style="margin: 10px 0">-->
            <!--      <el-button type="primary" @click="add" v-if="user.role === 1">新增</el-button>-->

            <!--    </div>-->

            <!--    搜索区域-->
            <div style="margin: 10px 0">
                <el-input v-model="search" placeholder="请输入订单编号" style="width: 20%" clearable></el-input>
                <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
            </div>
            <el-table
                    v-loading="loading"
                    :data="tableData"
                    border
                    stripe
                    style="width: 100%"
            >
                <el-table-column
                        width="70"
                        prop="id"
                        label="ID"
                        sortable
                >
                </el-table-column>
                <el-table-column
                        width="150"
                        prop="name"
                        label="订单名称">
                </el-table-column>
                <el-table-column
                        width="160"
                        prop="orderNo"
                        label="订单编号">
                </el-table-column>
                <el-table-column
                        prop="totalPrice"
                        label="总价">
                </el-table-column>
                <el-table-column
                        prop="payPrice"
                        label="实付款">
                </el-table-column>
                <el-table-column
                        prop="discount"
                        label="优惠">
                </el-table-column>
                <el-table-column
                        prop="transportPrice"
                        label="运费">
                </el-table-column>
                <el-table-column
                        width="150"
                        prop="createTime"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        width="150"
                        prop="payTime"
                        label="付款时间">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="购买人">
                </el-table-column>
                <el-table-column label="支付状态">
                    <template #default="scope">
                        <span v-if="scope.row.state === 0" style="color: orange">未支付</span>
                        <span v-if="scope.row.state === 1" style="color: green">已支付</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="240">
                    <template #default="scope">
                        <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
                            <template #reference>
                                <el-button size="mini" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>


        </div>
    </div>
</template>

<script>


    import request from "@/utils/request";

    export default {
        name: 'Myorder',
        components: {

        },
        data() {
            return {
                bg: {
                    backgroundImage:'url(' + require('../assets/background.jpg') + ')',
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "100% 100%"
                },
                user: {},
                loading: true,
                form: {},
                dialogVisible: false,
                search: '',
                currentPage: 1,
                pageSize: 10,
                total: 0,
                tableData: [],
            }
        },
        created() {
            let userStr = sessionStorage.getItem("user") || "{}"
            this.user = JSON.parse(userStr)
            // 请求服务端，确认当前登录用户的 合法信息
            request.get("/user/" + this.user.id).then(res => {
                if (res.code === '0') {
                    this.user = res.data
                }
            })

            this.load()
        },
        methods: {
            load() {
                this.loading = true
                request.get("/myorder/" + this.user.id).then(res => {
                    this.loading = false
                    this.tableData = res.data
                })
            },
            handleDelete(id) {
                console.log(id)
                request.delete("/order/" + id).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                    this.load()  // 删除之后重新加载表格的数据
                })
            },


        }
    }
</script>
